<!doctype html>
<html>

<head>
	<meta content="text/html; charset=UTF-8" http-equiv="content-type" />
	<meta name="viewport" content="width=device-width,initial-scale=1">
	<link href="lib/bootstrap/css/bootstrap.min.css" rel="stylesheet" crossorigin="anonymous">
	<script src="lib/bootstrap/js/bootstrap.min.js" crossorigin="anonymous"></script>
	<style>
		html,
		body {
			margin: 0;
			padding: 0;
		}

		#myeditor_container {
			overflow: auto;
			height: 100%;
			position: relative;
			background-color: #eee;
		}
	</style>
</head>

<body>
	<div id="container" class="container text-left" style="max-width: 100%; max-height: 100%; overflow: hidden;">
		<div class="row" style="width: 100%; height:100%; overflow: hidden;">
			<div class="col-2" style="height:100%; overflow:auto;">
				<ul class="list-group" id="tmpl_container">
					<li class="list-group-item"><img src="templates/1.jpeg" class="img-thumbnail" data-tmplid="1"
							alt="..."></li>
					<li class="list-group-item"><img src="templates/2.jpeg" class="img-thumbnail" data-tmplid="2"
							alt="..."></li>
					<li class="list-group-item"><img src="templates/3.jpeg" class="img-thumbnail" data-tmplid="3"
							alt="..."></li>
					<li class="list-group-item"><img src="templates/4.jpeg" class="img-thumbnail" data-tmplid="4"
							alt="..."></li>
							<li class="list-group-item"><img src="templates/5.png" class="img-thumbnail" data-tmplid="5"
									alt="..."></li>
									<li class="list-group-item"><img src="templates/6.png" class="img-thumbnail" data-tmplid="6"
											alt="..."></li>
											<li class="list-group-item"><img src="templates/7.png" class="img-thumbnail" data-tmplid="7"
													alt="..."></li>
													<li class="list-group-item"><img src="templates/8.png" class="img-thumbnail" data-tmplid="8"
															alt="..."></li>
				</ul>
			</div>
			<div class="col-8" style="height:100%; overflow: hidden;">
				<div id="myeditor_container" style="height:100%; overflow:auto;background-color: #eee;">
					<img id="btn_zoomin" src="images/zoom_in.png" style="position: fixed; left: 60%; bottom: 10px; z-index:100;box-shadow: 0 0 10px 10px #fff; transform:scale(0.6);
					background-color: #fff;" />
					<img id="btn_zoomout" src="images/zoom_out.png" style="position: fixed; left: 65%; bottom: 10px; z-index:100;box-shadow: 0 0 10px 10px #fff; transform:scale(0.6);
					background-color: #fff;" />

					<ul class="dropdown-menu" id="element_menu">
						<li><h6 class="dropdown-header title">Dropdown header</h6></li>
						<li><a class="dropdown-item" href="#" data-action="delete">移除</a></li>
						<li><a class="dropdown-item" href="#" data-action="toplevel">顶层</a></li>
						<li><a class="dropdown-item" href="#" data-action="prelevel">上一层</a></li>
						<li><a class="dropdown-item" href="#" data-action="nextlevel">下一层</a></li>
						<li><a class="dropdown-item" href="#" data-action="bottomlevel">底层</a></li>
						<li><a class="dropdown-item" href="#" data-action="copy">复制</a></li>
					</ul>
				</div>
			</div>
			<div class="col-2" style="height:100%; overflow:auto;">
				<img id="previewImg" width="200" />
				<hr />
				<span>滤镜：</span>
				<div id="css_filters"></div>
				</div>
		</div>
	</div>

</body>
<script type="module" src="index.js"></script>

</html>